<!--
 * @Author: your name
 * @Date: 2022-01-06 15:41:27
 * @LastEditTime: 2022-01-07 15:01:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \elementui\src\views\Login1.vue
-->
<template>
    <div class="login">
        <el-from :model="myfrom" label-width="100px" class="from">
            <el-from-item label="用户">
                <el-input v-model="myfrom.name"></el-input>
            </el-from-item>
            <el-from-item label="密码">
                <el-input v-model="myfrom.pwd"></el-input>
            </el-from-item>
            <el-from-item>
                <el-button type="primary" @click="fnsubmit">提交</el-button>
            </el-from-item>
        </el-from>
    </div>
</template>
<script>
import insatnce from "../api/index.js"  //调取写的拦截，这其实就是将获取与发送写在了一起，更加整体
import debounce from "../plugin/debounce.js"
export default {
    name:"Login",
    data(){
        return {
            myfrom:{
                name:"zs",
                pwd:111
            }
        }
    },
    created(){
        this.fnajax=debounce(this.fnsubmit) //业务防抖函数封装
    },
    methods:{
        fndebounce(){
            // 防抖函数封装
            this.fnajax()
           
        },
        async fnsubmit(){
            let name=this.myfrom.name;
            let pwd=this.myfrom.pwd;
            console.log(name,pwd);
            // insatnce.get("/users",{params:{name,pwd}})
            // .then(res=>console.log(res))
            // .catch(err=>console.log(err))

            let {data}=await insatnce.get("users",{params:{name:"123"}});
            // console.log(data);
            if(data.length>0){
                 this.$message({
                    showClose: true,
                    message: '恭喜你，这是一条成功消息',
                    type: 'success',
                    duration:1000,
                    onClose:()=>{
                        // 返回的是message的实例
                        alert("====");
                        this.$router.push({name:"Home"});
                    }
                    
                 });
            }
        }
    }
}
</script>
<style scope>
.login{
    width: 700px;
    height: 200px;
    /* border:1px solid #000; */
    background:lightblue;
    margin:100px auto;
    padding:50px 20px;
    
}
.login .from{
    width: 600px;
    height: 200px;
    margin:0 auto;
    /* padding:100px 0 0 0; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

</style>